import React from 'react'
import {Modal, Form} from 'antd'
import {TwsReactMarkdownPreview} from 'tws-antd'
import {previewModalStyle} from '../../../constant/constant-style'
import MultipleChoice from './multiple-choice'
import BlankQuiz from './blank-quiz'
import SingleChoice from './single-choice'
import SurveyQuiz from './survey-quiz'
import CodingQuiz from './coding-quiz'
import OnlineCodingQuiz from './online-coding-quiz'
import OnlineLanguageQuiz from './online-language-quiz'
import LogicQuiz from './logic-quiz'
import {quizTypes} from '../../../constant/constant-data'
import { FormattedMessage } from 'react-intl'
import { convertContent } from '../../../constant/lang-util'

const MAP_COMPONENT = {
  'MULTIPLE_CHOICE': MultipleChoice,
  'BASIC_BLANK_QUIZ': BlankQuiz,
  'SINGLE_CHOICE': SingleChoice,
  'SURVEY_QUIZ': SurveyQuiz,
  'HOMEWORK_QUIZ': CodingQuiz,
  'ONLINE_CODING_QUIZ': OnlineCodingQuiz,
  'ONLINE_LANGUAGE_QUIZ': OnlineLanguageQuiz,
  'LOGIC_QUIZ': LogicQuiz
}

const PreviewModal = ({quiz, visible, closeModal, type}) => {
  const quizType = quizTypes.find(item => item.type === type) || {text: ''}

  if (type === 'BASIC_QUIZ') {
    type = quiz.type
  }

  const RenderComponent = MAP_COMPONENT[type]

  return (
    <Modal
      title={convertContent('预览') + ` ${quizType.text}`}
      visible={visible}
      footer={null}
      onCancel={closeModal}
    >
      <Form>

        {type === 'LOGIC_QUIZ' ? '' : <Form.Item {...previewModalStyle} label={<FormattedMessage id='标签' />}>
          <span>{quiz.tags}</span>
        </Form.Item>}

        {type !== 'CODING_QUIZ' && type !== 'LOGIC_QUIZ'
          ? <Form.Item {...previewModalStyle} label={<FormattedMessage id='描述' />}>
            <TwsReactMarkdownPreview source={quiz.description} />
          </Form.Item> : ''}
        {RenderComponent
          ? <RenderComponent
            quiz={quiz}
            FormItem={Form.Item}
            formItemLayout={previewModalStyle} />
          : ''}
        {type === 'SUBJECTIVE_QUIZ' || type === 'SIMPLE_CODING_QUIZ'
          ? <Form.Item {...previewModalStyle} label={<FormattedMessage id='参考答案' />}>
            <TwsReactMarkdownPreview source={quiz.referenceAnswer} />
          </Form.Item> : ''}
        {type === 'ONLINE_LANGUAGE_QUIZ'
          ? <Form.Item {...previewModalStyle} label={<FormattedMessage id='参考答案' />}>
            <TwsReactMarkdownPreview source={'```\n' + quiz.answer + '\n```'} />
          </Form.Item> : ''}
      </Form>
    </Modal>
  )
}

export default Form.create()(PreviewModal)
